@charset "utf-8";
/* reset start */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,img{margin:0; padding:0; -webkit-touch-callout:none;}
fieldset,img {border:0 none;}
img{vertical-align:top}
ol,ul,li{list-style:none} table{border-collapse:collapse; border-spacing:0;}
input,textarea,button,select{ -webkit-appearance:none; -moz-appearance:none; border-radius:0;}
/*html5 reset*/
header, footer, section, nav, menu, details, hgroup, figure, figcaption, article, aside{margin:0;padding:0;}
a,a:active{ text-decoration:none; outline:none;}
.clearfix:before,.clearfix:after{ content:""; display:table;}.clearfix:after{ clear:both;}.clearfix{ *zoom:1;}
a,input,button,textarea,label,select,span,img{-webkit-tap-highlight-color:rgba(255,0,0,0); -moz-tap-highlight-color:rgba(0, 0, 0, 0)}
/* reset end */
body{font:15px/24px "Source Sans Pro", "Helvetica Neue", Arial, sans-serif, "Microsoft YaHei"; color:#282828; background:#EFEFF4; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; min-width:320px; margin: 0;}
.fl{float:left;}.fr,.tra_num{float:right;}.hide{display:none;}.show{display: block}
.yh,input,button,select,textarea{font-family:"Microsoft YaHei"}
input,button,select,textarea{ outline:none}
html,body{height: 100%;}

.page_header{ height: 44px; line-height: 44px; background: #4895F4; color: #fff; text-align: center;}
.page_back{float: left; width: 44px; text-indent: -200px; overflow: hidden; position: relative;}
.page_back:before{ content: ""; position: absolute; width:12px; height: 12px; border-left:2px solid #fff; border-bottom:2px solid #fff; left: 15px; top: 16px; transform: rotate(45deg);}
.page_back:active{ background: #3986E5;}
.page_header h1{ font-size: 18px; font-weight: normal; margin: 0 44px;}

.vp_list li{ margin-bottom: 2px; background: #fff; padding: 10px 12px 8px;}
.avat_box{height: 30px; line-height: 30px;}
.avat_box:active, .vp_intro:active,.vp_zan:active,.art_author:active,.art_zan:active{ color: #FF4540;}
.avat_img{ float: left; border-radius: 20px;}
.avat_name{ margin-left: 10px;}
.vp_intro{ padding: 8px 0; line-height: 21px;}
.vp_intro dt{ font-weight: bold; margin-bottom: 4px;}
.vp_intro dd{ color: #666; height: 42px; text-overflow: ellipsis; width: 100%; overflow: hidden;  word-break: break-all;  -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;}
.vp_operate{ font-size: 12px; color: #999;}
.vp_zan{ background: url(../images/zan.png) no-repeat 0 4px; background-size: 11px auto; padding-left: 15px; min-width: 23px;}
.vp_zan_on{ background-position: 0 -18px;}

.white_bg{ background: #fff;}
.art_block{ padding: 10px 12px;}
.art_tit{ font-size: 20px; font-weight: normal; margin-bottom: 5px; min-height: 32px}
.art_time, .art_tip{ font-size: 12px; color: #999; margin: 1px 0 10px; line-height: 18px; min-height: 18px}
.art_content p{ margin: 10px 0}
.art_tip{ margin: 10px 0;}
.art_author{ box-shadow: 0 0 8px 0px #999; border-radius: 4px; padding: 5px 8px; line-height: 20px; position: relative; height: 40px}
.art_author .avat_img{ margin-right: 10px;}
.art_author .atten_btn{ top: 10px;}
.avat_fans{ color: #888; font-size: 12px;}
.art_zan_box{ text-align: center;}
.art_zan{ display: inline-block; margin: 8px auto 6px; min-width: 50px; text-align: center; height: 32px; line-height: 32px; color: #666; border: 1px solid #ddd; border-radius: 20px; background: url(../images/zan.png) no-repeat 18px 3px; padding-left: 46px; padding-right: 20px;}
.art_zan_on{background-position: 18px -39px;}

.rss_tip{ padding-top: 50px; text-align: center; position: relative;}
.rss_tip:before{ content: ""; position: absolute; left: 50%; top: 5px; width: 40px; height: 40px; border-radius: 30px; background: bisque url(../images/lock_icon01.png) no-repeat center 7px; margin-left: -18px; background-size: 18px auto;}
.rss_btn,.atten_btn{ border: 0 none; width: 120px; height: 32px; background: #4895F4; text-align: center; color: #fff; border-radius: 3px; font-size: 15px;}
.rss_btn:active,.atten_btn:active{ background: #2A77D6;}
.rss_btn_gray, .rss_btn_gray:active{ background: #CCCCCC;}
.rss_btn_box{ padding: 10px 0; text-align: center;}

.tougu_list li{ position: relative; margin-bottom: 2px; background: #fff; padding: 10px 12px; color: #666; font-size: 13px;}
.tougu_list li:active{ background: #F5F5F5;}
.tg_avatar{ margin: 5px 12px 0 0; border-radius: 50px; box-shadow: 0 0 5px 0 #999;}
.tg_fans_box{ color: #999;}
.tg_fans{ color: #282828;}
.tg_name{ font-size: 15px; color: #282828;}
.tg_ability,.tg_fans_box{ font-size: 13px }
.tg_ability span{ display: inline-block; margin: 0 3px;}
.atten_btn{position: absolute; top: 20px; right: 12px; width: 76px; height: 30px;}
.atten_btn_yes{ background: #ECF4FF; color: #529FFF;}

.tougu_intro{ padding: 5px 12px;}
.tougu_info{ position: relative; padding: 10px 0;}
.tg_data{ margin: 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 0; display: flex; text-align: center;}
.tg_data li{flex-grow:1;}
.tg_data li span{ color: #999; font-size: 13px;}
.tg_font{ padding-top: 10px;}
.tg_font dt{ font-weight: bold; margin-bottom: 5px;}
.vp_is_pay{ background: #FEF9EC; color: #F4B82A; font-size: 12px; padding: 0 4px; border-radius: 4px; font-weight: normal; margin-right: 3px;}

.nav_list{ padding: 30px 15px 0}
.nav_list li{ text-align: center; font-size: 18px; margin: 10px 0; background: #529FFF; color: #fff; height: 40px; line-height: 40px;}
.art_content{ padding-top:15px; text-align: justify; word-break: break-all; }

.alert_box{ position: fixed; z-index: 100; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; top: 0; left: 0}
.alert_content{ background:#fff; border-radius: 4px; width: 70%; min-height: 150px; text-align: center; display: flex; flex-flow:column nowrap; position: relative; z-index: 102;}
.alert_tit{ margin:12px 0 5px; font-size: 15px; color: #666;}
.alert_main{ padding: 15px 10px; font-size: 16px; flex-grow:2}
.alert_bot{ height: 40px; line-height: 40px; text-align: center;}
.alert_btn{ border-top:1px solid #ddd; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; font-size: 16px; color: #EA5641;}
.alert_btn:active{ background: #f5f5f8;}
.mask_bg{ background: rgba(0,0,0,.8); position: fixed; z-index: 101; width: 100%; height: 100%;}
